<template>
  <div>
    <headerTop></headerTop>
    <!-- 主体 -->
    <div class="cart_content wrap">
      <div class="header">
        <div @click="GoIndex()" class="fl">
          <img src="@/assets/image/logo_shape@2x.png" alt />
          联众医药
        </div>
        <div class="fr">
          <el-steps :active="state" align-center>
            <el-step title="我的购物车" description></el-step>
            <el-step title="核对订单信息" description></el-step>
            <el-step title="提交订单" description></el-step>
          </el-steps>
        </div>
      </div>
      <div class="content">
        <div class="topTitle">购物车商品</div>
        <div class="title">
          <div @click="all()" :class="{active:allType == 1}" class="all">
            <span></span> 全选
          </div>
          <div class="goodstitle">商品</div>
          <div class="goodsmoney">单价</div>
          <div class="goodssum">数量</div>
          <div class="moneySum">总价</div>
          <div class="goodsSet">操作</div>
        </div>
        <div v-for="(v,i) in list.datas" :key="i" class="goodsList">
          <div @click="add(v)" :class="{active:type.indexOf(v.id)!== -1}" class="all">
            <span></span>
          </div>
          <div class="goodstitle">
            <img class="fl imgs" :src="v.goods_img" />
            <div class="fl txt red">
              <p class="two">{{v.goods_name}}</p>
              <p class="one">
                <span>满折</span>
                该商品满十件九折，满二十件八折。
              </p>
            </div>
          </div>
          <div class="goodsmoney">￥{{v.price}}</div>
          <div class="goodssum">
            <div class="sum">
              <span @click="cut(v)">-</span>
              <input type="number" v-model="v.num" />
              <span @click="plus(v)">+</span>
            </div>
          </div>
          <div class="moneySum">￥{{v.price * v.num}}</div>
          <div @click="remove(v)" class="goodsSet">删除</div>
        </div>
        <div class="bottom">
          <div @click="all()" :class="{active:allType == 1}" class="all">
            <span></span> 全选
          </div>
          <div @click="allRemove()" class="goodstitle">删除选中商品</div>
          <div class="goodsmoney">已优惠：￥100.00</div>
          <div class="goodssum">
            <span>总价</span>
            ￥100.00
          </div>
          <div class="goodsSet">
            <button @click="GoCartOrder()">去结算</button>
          </div>
        </div>
      </div>
    </div>
    <div class="bg1">
      <publicBottom></publicBottom>
    </div>
  </div>
</template>
<script>
import headerTop from "@/components/public/public_headerTop.vue";
import publicBottom from "@/components/public/public_bottom";

import { Goods_cart_index } from "@/request/index"; // 购物车列表
import { incCart } from "@/request/index"; // +1
import { desCart } from "@/request/index"; // -1
import { delCart } from "@/request/index"; //删除
export default {
  components: {
    headerTop,
    publicBottom
  },
  data() {
    return {
      state: 1, // 步骤条
      shop_id: -1,
      list: [],
      allType: 0,
      type: [] //样式 选择 id  也是选中
    };
  },
  created() {
    let datas = localStorage.getItem("lzyyToken");
    let Athis = this;
    if (datas != null) {
      this.$tokens = datas;
    } else {
      this.$message.error("登录错误，请重新登录");
      setTimeout(function() {
        Athis.$router.replace({ path: "/land" });
      }, 1000);
    }
    this.shop_id = localStorage.getItem("lzyyShopId"); // 店铺 ID
  },
  mounted() {
    this.start();
  },
  methods: {
    GoCartOrder() {
      if (this.list == "") {
        this.$message.error("当前购物车没有商品");
      } else {
        if (this.type == "") {
          this.$message.error("当前没有选中商品");
        } else {
          let arr = this.type;
          arr = arr.join(",");
          this.$router.push({ path: "/cartOrder?id=" + arr });
        }
      }
    },
    remove(e) {
      delCart({
        token: this.$user.token,
        CartId: e.id
      }).then(res => {
        if (res.code == 1) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.list = [];
          this.start();
        }
      });
    },
    allRemove() {
      if (this.list.datas == "") {
        this.$message.error("当前购物车没有商品");
      } else {
        if (this.type != "") {
          let datas = this.type;
          datas = datas.join(",");
          delCart({
            token: this.$user.token,
            CartId: datas
          }).then(res => {
            if (res.code == 1) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.list = [];
              this.start();
            }
          });
        } else {
          this.$message.error("请选择商品");
        }
      }
    },
    // -1
    cut(e) {
      desCart({
        token: this.$user.token,
        CartId: e.id
      }).then(res => {
        if (res.code == 1) {
          this.start();
        }
      });
    },
    //  +1
    plus(e) {
      incCart({
        token: this.$user.token,
        CartId: e.id
      }).then(res => {
        if (res.code == 1) {
          this.start();
        }
      });
    },
    // 全部选择
    all() {
      if (this.allType == 0) {
        for (let i = 0; i < this.list.datas.length; i++) {
          this.type.push(this.list.datas[i].id);
        }
        this.allType = 1;
      } else {
        this.allType = 0;
        this.type = [];
      }
    },
    //  选中
    add(e) {
      if (this.type.indexOf(e.id) == -1) {
        this.type.push(e.id);
        if (this.type.length == this.list.datas.length) {
          this.allType = 1;
        }
      } else {
        this.allType = 0;
        this.type.splice(this.type.indexOf(e.id), 1);
      }
    },
    start() {
      Goods_cart_index({
        token: this.$user.token,
        shop_id: this.shop_id
      }).then(res => {
        if (res.data != "") {
          this.list = res.data;
          console.log(this.list);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import url("../../assets/less/index");
</style>
